<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import dayjs from 'dayjs';
import { axiosrmedical } from '@/http/axiosRead';

const route = useRoute();
const router = useRouter();
const loading = ref(true);
const detail = ref<any>(null);

const fetchDetail = async () => {
  loading.value = true;
  const registerId = route.params.registerId;
  try {
    const res = await axiosrmedical.get('/Register/GetRegisterFeeDetail', {
      params: { registerId }
    });
    detail.value = res.data;
  } finally {
    loading.value = false;
  }
};

onMounted(fetchDetail);
</script>

<template>
  <div class="fee-detail-page">
    <van-nav-bar title="费用详情" left-arrow @click-left="router.back()">
      <template #right>
        <div class="nav-icons">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="circle-btn"></span>
        </div>
      </template>
    </van-nav-bar>
    <div v-if="loading" class="loading">加载中...</div>
    <template v-else>
      <div class="patient-info-card">
        <div class="row">
          <span>姓名：{{ detail.patientName }}</span>
          <span>性别：{{ detail.gender }}</span>
          <span>年龄：{{ detail.age }}岁</span>
        </div>
        <div class="row report-date">报告日期：{{ detail.reportDate ? dayjs(detail.reportDate).format('YYYY-MM-DD') : '' }}</div>
        <div class="divider"></div>
        <div class="total-row">合计：<span class="total-amount">￥{{ detail.totalAmount?.toFixed(2) }}</span></div>
      </div>
      <div class="fee-list-card">
        <div class="fee-list-title">费用明细</div>
        <div v-for="item in detail.items" :key="item.itemName" class="fee-item">
          <div class="item-row">
            <span>{{ item.itemName }}</span>
            <span class="item-amount">￥{{ item.amount?.toFixed(2) }}</span>
          </div>
          <div class="item-desc">单价：￥{{ item.unitPrice?.toFixed(2) }} 数量：{{ item.quantity }}</div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.fee-detail-page {
  background: #f8f9fa;
  min-height: 100vh;
}
.patient-info-card {
  background: #fff;
  border-radius: 10px;
  margin: 16px 12px 12px 12px;
  padding: 16px;
  box-shadow: 0 2px 8px #f0f1f2;
  position: relative;
}
.patient-info-card .row {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  margin-bottom: 6px;
}
.patient-info-card .report-date {
  color: #888;
  font-size: 13px;
  margin-bottom: 6px;
}
.divider {
  border-top: 1px dashed #e5e5e5;
  margin: 8px 0 8px 0;
}
.total-row {
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.total-amount {
  color: #e94e77;
  font-size: 18px;
  font-weight: bold;
}
.fee-list-card {
  background: #fff;
  border-radius: 10px;
  margin: 0 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px #f0f1f2;
}
.fee-list-title {
  font-size: 15px;
  font-weight: 600;
  color: #888;
  margin-bottom: 10px;
}
.fee-item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0 6px 0;
}
.fee-item:last-child {
  border-bottom: none;
}
.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.item-amount {
  color: #e94e77;
  font-weight: bold;
}
.item-desc {
  color: #888;
  font-size: 13px;
}
.loading {
  text-align: center;
  color: #888;
  margin-top: 40px;
}
.nav-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot {
  width: 6px;
  height: 6px;
  background: #d8d8d8;
  border-radius: 50%;
  display: inline-block;
}
.circle-btn {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8d8d8;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}
</style> 